<template>
  <div>
    <div>
      <van-nav-bar
          title="账单"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <!--    在这个-->
    <div v-for="(item,key) in billList" :key="key">
      <!--      盒子里面v-for数据即可-->
      <div class="billdatemessage">
        <span class="billdate">{{key}}</span>
        <span class="billei">支出： {{ item.expend.toFixed(2) }}₱ 收入： {{ item.income.toFixed(2) }}₱</span>
      </div>
      <div class="billdetail" v-for="(item1,key1) in item" :key="key1" @click="goBillParticulars(item1)">
        <div>
          <span class="billicon"><van-icon name="gold-coin" color="#565656" size="3rem"/></span>
          <span class="source">{{ item1.classify }}</span>
          <span class="billmoney">{{item1.classify=='提现'?'-':'+'}}{{item1.money}}₱</span>
          <span class="billtime">{{item1.overTime | formatTimer}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      billList:[],
      expend:0, //支出
      income:0, //收入
      registerIp:''
    }
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    this.registerIp=parse.registerIp
    this.getBillList()
  },
  filters: {
    formatTimer: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    }
  },
  methods: {
    goBillParticulars(data){
      this.$router.push({
        path: '/billparticulars',
        query:{
          data:data
        }
      })
    },
    onClickLeft() {
      this.$router.push({
        path: '/mywallet'
      })
    },
    getBillList(){
      axios.get('http://localhost:11219/mine/bill/getbill/'+this.registerIp).then(res=>{
        this.billList=res.data.map;
        if(this.billList==null){
          this.$toast('暂无账单');
        }else{
          for (let billListElementKey in this.billList) {
            this.expend=0;
            this.income=0;
            for (let billListElementKey1 in this.billList[billListElementKey]) {
              if (this.billList[billListElementKey][billListElementKey1].classify=="提现") {
                this.expend+=Number(this.billList[billListElementKey][billListElementKey1].money)
                console.log(this.expend)
              }else{
                this.income+=Number(this.billList[billListElementKey][billListElementKey1].money)
              }
            }
            this.billList[billListElementKey].expend=this.expend
            this.billList[billListElementKey].income=this.income;
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.billdatemessage{
  width: 100%;
  height: 50px;
}
.billdatemessage .billdate{
  text-align: left;
  width: 100px;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.billdatemessage .billei{
  float: left;
  margin-top: 30px;
  margin-left: -100px;
  font-size: 12px;
  color: #a4acb7;
}
.billdetail{
  width: 100%;
  height: 100%;
  background-color: white;
}
.billdetail div{
  width: 100%;
  height:70px;
}
.billdetail div .billicon{
  float: left;
  margin: 10px;
}
.billdetail div .source{
  width: 80px;
  text-align:left;
  float: left;
  margin-top: 10px;
}
.billdetail div .billtime{
  float: left;
  margin-top: 40px;
  margin-left: -80px;
  font-size: 12px;
  color: #a4acb7;
}
.billdetail div .billmoney{
  float: right;
  margin-top: 27px;
  margin-right: 20px;
}
</style>
